<template>
	<view class="detail">
		<form @submit="submitForm">
			<view class="card">
				<view class="flex-between">
					<view>
						<view class="list flex" style="width: 600rpx;">
							<view class="left flex">
								<image src="/static/pos-s1.png" mode="widthFix"></image>
								起点
							</view>
							<input class="right" type="text" @click="selectAddr(1)" name="from_title" v-model="startObj.title" disabled placeholder="从哪儿出发">
						</view>
						<view class="list flex" style="width: 600rpx;">
							<view class="left flex">
								<image src="/static/pos-e1.png" mode="widthFix"></image>
								终点
							</view>
							<input class="right" type="text" @click="selectAddr(2)" name="to_title" v-model="endObj.title" disabled placeholder="你要去哪儿">
						</view>
					</view>
					
					<image src="/static/arrow-both1.png" mode="widthFix" class="arrow"></image>
				</view>
				<view class="list flex">
					<view class="left flex">
						<image src="/static/pos2.png" mode="widthFix"></image>
						路线
					</view>
					<textarea name="path" class="right" placeholder="例:XX出发,途径X地铁站(推荐上车点),X站上高速,目的地:XX"></textarea>
				</view>
				<view class="list flex">
					<view class="left flex">
						<image src="/static/date.png" mode="widthFix"></image>
						时间
					</view>
					<timeSelector
					    showType="yearToMinute"
					    beginDate="1970-01-01"
					    endDate="2030-12-31"
					    beginTime="06:00:00"
					    endTime="23:59:59"
					    @btnConfirm="btnConfirm" 
					    @btnCancel="btnCancel"
					>
					   <input class="right" name="begin_time" v-model="begin_time" type="text" disabled placeholder="请选择出发时间">
					</timeSelector>
					
				</view>
				<view class="list flex">
					<view class="left flex">
						<image src="/static/chexing.png" mode="widthFix"></image>
						车型
					</view>
					<input class="right" name="brand" type="text" placeholder="例:别克英朗">
				</view>
				<view class="list flex">
					<view class="left flex">
						<image src="/static/chezuo.png" mode="widthFix"></image>
						余座
					</view>
					<input class="right" name="seat" type="number" placeholder="请输入余座(1-4)">
				</view>
				<view class="list flex">
					<view class="left flex">
						<image src="/static/money.png" mode="widthFix"></image>
						A费
					</view>
					<picker @change="bindPickerChange" :value="feeIndex" :range="fee" :disabled="!fee.length">
						<view class="right flex">
							<input name="price"  @click="showTip" disabled type="text" v-model="fee[feeIndex]" placeholder="请选择A费">
							元
						</view>
					</picker>
				</view>
				<view class="list flex">
					<view class="left flex">
						<image src="/static/beizhu.png" mode="widthFix"></image>
						备注
					</view>
					<input class="right" name="note" type="text" placeholder="例:顺路上下,预定后电话确认">
				</view>
				<view class="list flex-between">
					<text>请确认您的联系电话：13545612356</text>
					<navigator url="/pages/self/modifyTel" hover-class="none">修改</navigator>
				</view>
			</view>
			<view class="bottom flex">
				<checkbox :checked="isChecked" style="transform: scale(.8);" @click="isChecked = !isChecked"/>
				阅读并同意 
				<navigator url="" hover-class="none">《相关条款》</navigator>
			</view>
			<button form-type="submit">确认发布</button>
		</form>
		
		
	</view>
</template>

<script>
	import timeSelector from '@/components/wing-time-selector/wing-time-selector.vue';
	export default {
	    components: {timeSelector},
		data() {
			return {
				isChecked:false,
				type:1,//1：起点  2：终点
				startObj:{},//起点数据对象
				endObj:{},//终点数据,
				feeIndex:-1,
				fee:[0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60],
				begin_time:''
			};
		},
		onLoad(options) {
			this.startObj = {};
			this.endObj = {}
			uni.setNavigationBarTitle({
				title:options.title
			})
		},
		onShow() {
			if(uni.getStorageSync('addr')){
				if(this.type == 1){
					this.startObj = JSON.parse(uni.getStorageSync('addr'))
				}else{
					this.endObj = JSON.parse(uni.getStorageSync('addr'))
				}
				if(JSON.stringify(this.startObj) != "{}" && JSON.stringify(this.endObj) != "{}"){
					this.getFee()
				}
				
			}
		},
		methods:{
			btnConfirm(e){
				console.log(e)
				this.begin_time = e.key.split('+').join('-');
			},
			btnCancel(e){
				console.log(e)
			},
			submitForm(e){
				let formData = e.detail.value;
				for(let k in formData){
					if(!formData[k]){
						uni.showToast({
							title:'请完善发布信息',
							icon:'none'
						})
						return
					}
				}
				if(!this.isChecked){
					uni.showToast({
						title:'请阅读并勾选相关条款',
						icon:'none'
					})
					return
				}
				
				let start2 = this.startObj;
				let end2 = this.endObj;
				formData.from_province = start2.province;
				formData.from_city = start2.city;
				formData.from_address = start2.address;
				formData.from_adcode = start2.adcode;
				formData.from_latitude =start2.location.lat ;
				formData.from_longitude = start2.location.lng;
				
				formData.to_province = end2.province;
				formData.to_city = end2.city;
				formData.to_address = end2.address;
				formData.to_adcode = end2.adcode;
				formData.to_latitude = end2.location.lat;
				formData.to_longitude = end2.location.lng;
				formData.seat = Number(formData.seat)
				
				this.$https.post('car/save',formData).then(res=>{
					console.log(res)
					uni.showToast({
						title:'发布成功',
						icon:'none'
					})
					setTimeout(()=>{
						uni.reLaunch({
							url:'/pages/index/index'
						})
					},500)
					
				})
				
			},
			// 获得A费
			getFee(){
				let start1 = this.startObj.location;
				let end1 = this.endObj.location;
				this.$https.get('car/prices',{
					from_longitude:start1.lng,
					from_latitude:start1.lat,
					to_longitude:end1.lng,
					to_latitude:end1.lat,
				}).then(res=>{
					this.fee = res;
				})
			},
			// 选择起始点
			selectAddr(i){
				console.log(i)
				this.type = i;
				uni.navigateTo({
					url:"/pages/publish/searchAddr?type=" + i
				})
			},
			// A费选择器
			bindPickerChange(e){
				console.log(e)
				this.feeIndex = e.target.value;
			},
			showTip(){
				if(!this.fee.length){
					uni.showModal({
						title:"提示",
						content:"请选择起点、终点",
						showCancel:false
					})
					return
				}
					
			}
		},
		onHide() {
			uni.removeStorageSync('addr')
		},
		onTabItemTap() {
			if(uni.getStorageSync('auth_status') == -1){
				uni.showModal({
					content:'请先进行实名认证',
					showCancel:false,
					confirmColor:'#4CD964',
					success:()=>{
						uni.navigateTo({
							url:'/pages/self/shiming'
						})
					}
				})
				return
			}
			if(uni.getStorageSync('auth_status') == 1){
				uni.showToast({
					title:'实名认证正在审核中',
					icon:'none'
				})
				return
			}
			if(uni.getStorageSync('auth_status') == 2){
				uni.navigateTo({
					url:'/pages/self/shiming'
				})
				return
			}
			if(uni.getStorageSync('car_auth_status') == -1){
				uni.showModal({
					content:'请先进行车主认证',
					showCancel:false,
					confirmColor:'#4CD964',
					success:()=>{
						uni.navigateTo({
							url:'/pages/self/chezhuCer'
						})
					}
				})
				return
			}
			if(uni.getStorageSync('car_auth_status') == 1){
				uni.showToast({
					title:'车主认证正在审核中',
					icon:'none'
				})
				return
			}
			if(uni.getStorageSync('car_auth_status') == 2){
				uni.navigateTo({
					url:'/pages/self/chezhuCer'
				})
				return
			}
		}
	}
</script>

<style lang="less">
	page{
		background: #f2f3f4;
	}
	@color: #4CD964;
	.detail{
		padding: 30rpx;
		.card{
			background: white;
			border-radius: 15rpx;
			padding: 10rpx 20rpx;
			.arrow{
				width: 50rpx;
				height:auto;
			}
			.list{
				padding: 20rpx 0;
				font-size: 30rpx;
				border-bottom: 1rpx solid #f2f3f4;
				.left{
					width: 140rpx;
					font-weight: bold;
					image{
						width: 40rpx;
						height: auto;
						margin-right: 15rpx;
					}
				}
				.right{
					width: 500rpx;
					font-size: 28rpx;
					color:#333;
				}
				text{
					font-size: 28rpx;
					color:#666;
				}
				navigator{
					color:@color
				}
				textarea{
					height: 80rpx;
				}
			}
		}
		.bottom{
			line-height: 3;
			font-size: 28rpx;
			color:#999;
			navigator{
				color:@color
			}
		}
		button{
			margin: 80rpx 0;
			background: @color;
			color:#fff;
			font-size: 32rpx;
		}
	}
</style>
